<template>
  <div>
    <el-dialog title="" :lock-scroll="false" :visible.sync="visible" customClass="pushSteps">
      <div class="stepTop">
        <img src="../assets/img/pushSteps/buzhou_img1.png" v-if="!bindwechatBool||!openVIP" />
        <img src="../assets/img/pushSteps/buzhou_img2.png" v-else />
        <div class="progressBar" :class="{'initial50':(bindwechatBool||openVIP)&&!(bindwechatBool&&openVIP),'initial100':bindwechatBool&&openVIP}">
          <div class="progressBox">
            <span>{{!bindwechatBool&&!openVIP?stepInfo[0]:bindwechatBool&&openVIP?stepInfo[2]:stepInfo[1]}}</span>
            <span v-if="!bindwechatBool||!openVIP">{{!bindwechatBool&&!openVIP?stepOneInfo[0]:stepOneInfo[1]}},
              <i>{{!bindwechatBool&&!openVIP?stepTwoInfo[0]:bindwechatBool?stepTwoInfo[1]:stepTwoInfo[2]}}</i>
            </span>
          </div>
        </div>
      </div>
      <div class="stepOne" v-if="!bindwechatBool||!openVIP">
        <div class="stepBottom clearfix">
          <div class="stepBottomLeft">
            <p class="bindInfo" :class="bindwechatBool?'bindYes':'bindNo'">绑定微信</p>
            <div class="wechatBox" v-if="!bindwechatBool">
              <img :src="userWechat" />
            </div>
            <img :src="userInfo.face" class="headPortrait" v-else />
            <p class="prompt" v-if="!bindwechatBool">扫一扫二维码，绑定公众号</p>
            <button @click="bindwechat" v-if="!bindwechatBool">已绑定并关注公众号</button>
            <p class="teacherName" v-else>{{userInfo.nick_name}}</p>
          </div>
          <div class="stepBottomRight">
            <p class="bindInfo" :class="openVIP?'bindYes':'bindNo'">开通熙隆VIP</p>
            <img src="../assets/img/pushSteps/VIP_img.png" class="VIPimg" />
            <button class="RightBtn" v-if="!openVIP" @click="gotoOpenVIP">{{VIPfont?'我已开通熙隆VIP':'去开通熙隆VIP'}}</button>
            <p class="VIPuser" v-else>VIP使用中</p>
          </div>
        </div>
      </div>
      <div class="stepTwo" v-else>
        <p class="teacherTitle">选择牛人观点推送</p>
        <el-checkbox-group v-model="checkedDaka" id="dataBar">
          <el-checkbox v-for="item in dakaData" :label="item.id">
            <img :src="item.face" class="pushHeader" />
            <p class="pushName">{{item.name}}</p>
            <p class="introduce">{{item.good_at}}</p>
          </el-checkbox>
        </el-checkbox-group>
        <button class="pushBtn" @click="pushClick">确认推送</button>
        <p class="annotation">
          <span v-if="datatishi.is_follow==1&&datatishi.vip_type==1">您已经订阅过一位熙隆牛人啦，想订阅更多牛人请到VIP页面了解~</span>
          <span v-if="datatishi.is_follow!=1&&datatishi.vip_type==1">体验卡只可以选择一位熙隆牛人，且不可以更改；取消后无法再次订阅，请谨慎选择哦</span><br/>
          1、勾选后点击确认推送，您选择的牛人发布或追踪观点将第一时间通过微信公众号推送给您；<br/>
          2、推送或者取消某个牛人的观点推送请 <a href="http://www.xilongfx.com/clzx/" target="_blank">前往观点中心</a> 点击牛人头像下的小菜单进行操作；<br/>
          3、收不到推送有可能是没有关注微信服务号哦，可以试试微信扫描 <i>二维码</i> 关注。
          <img src="../assets/img/pushSteps/gongzhonghao_qr_img.png" class="publicImg" />
        </p>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import Scrollbar from 'smooth-scrollbar'

  export default {
    components: {Scrollbar},
    data () {
      return {
        visible: false,
        stepInfo: ['已完成第一步：0%','已完成第一步：50%','第二步：正在进行中'],
        stepOneInfo: ['迈出第一步','加快脚步'],
        stepTwoInfo: ['绑定微信并开通','马上开通熙隆VIP','绑定微信'],
        dakaData: '',
        checkedDaka: '',
        Scrollbar: {},
        user_id: '',
        bindwechatBool: false,
        openVIP: false,
        OnwechatBool: false,
        userInfo: '',
        userWechat: '',
        VIPfont: false,
        datatishi: ''
      }
    },
    created () {

    },
    mounted () {

    },
    watch: {
      visible: function (val, oldVal) {
        if (val) {
          this.userWechat = '/index/beta_api/viewWeixin?user_id='+this.user_id
        }
      }
    },
    methods: {
      total () {
        this.queryWechat()
        this.hasVIP()
        this.focusOn()
      },
      //查询微信
      queryWechat () {
        this.$http.post('/index/beta_api/isFollowWeixin').then((data) => {
          if (data.code) {
            if (!data.data.is_follow&&this.OnwechatBool) {
              this.$message('您还未绑定微信!')
            }
            this.bindwechatBool = data.data.is_follow
            this.userInfo = data.data.user_data
          }
        })
      },
      //查询是否是VIP
      hasVIP () {
        this.$http.post('/index/beta_api/isVip').then((data) => {
          if (data.code) {
            if (!data.data.if_vip) {
              if(this.VIPfont) {
                this.$message('您还未开通VIP!')
              }
              this.VIPfont = false
            }
            this.openVIP = data.data.if_vip
          }
        })
      },
      //查询牛人列表和已关注列表
      focusOn () {
        this.$http.post('/index/beta_api/getCoffeeAndFollowCoffee').then((data) => {
          if (data.code) {
            this.dakaData = data.data.coffeeArr
            this.checkedDaka = data.data.followCoffeeArr
            this.datatishi = data.data
            if(document.querySelector('#dataBar')) {
              this.Scrollbar = Scrollbar.init(document.querySelector('#dataBar'), { // 聊天滚动条初始实例化
                alwaysShowTracks: true
              })
            }
          }
        })
      },
      bindwechat () {
        this.queryWechat()
        this.OnwechatBool = true
      },
      gotoOpenVIP () {
        if (this.VIPfont) {
          this.hasVIP()
        } else {
          window.open("http://www.xilongfx.com/vipcard")
          this.VIPfont = true
        }
      },
      pushClick () {
        this.$http.post('/index/beta_api/subPushCoffee',{
          coffee_ids:this.checkedDaka.join('-')
        }).then((data) => {
          if (data.code) {
            this.$message('关注成功')
            this.visible = false
          } else {
            this.$message(data.msg)
          }
        })
      },
    }
  }
</script>

<style lang="scss">
  .pushSteps{
    border-radius: 6px;
    width: 700px;
    .el-dialog__header {
      padding: 0;
      .el-dialog__headerbtn {
        top: -40px!important;
        right: -38px!important;
        position: absolute;
        &:hover .el-icon-close:before {
          background: url("../assets/img/strategy/close_hover_icon.png");
        }
        .el-icon-close:before {
          width: 40px;
          height: 40px;
          background: url("../assets/img/strategy/close_icon.png");
          content: '';
          display: block;
          transition: background .2s linear;
        }
      }
    }
    .el-dialog__body {
      padding: 0 0 35px 0;
      .stepTop {
        position: relative;
        .progressBar {
          position: absolute;
          width: 16px;
          height: 16px;
          background: url("../assets/img/pushSteps/circle.png");
          top: 44px;
          left: 104px;
          &:before {
            position: absolute;
            content: '';
            width: 112px;
            height: 2px;
            background-color: #f5b539;
            top: 7px;
            left: -104px;
          }
          .progressBox {
            span:nth-of-type(1) {
              width: 121px;
              height: 30px;
              display: inline-block;
              background: url("../assets/img/pushSteps/tips_bg.png");
              font-size: 12px;
              color: #ffffff;
              line-height: 36px;
              text-align: center;
              position: absolute;
              top: 20px;
              left: -53px;
            }
            span:nth-of-type(2) {
              width: 180px;
              display: inline-block;
              position: absolute;
              top: 28px;
              left: 80px;
              font-size: 12px;
              i {
                color: #287cd0;
              }
            }
          }
        }
        .initial50 {
          animation: gotoLeft50 0.5s linear forwards;
          &:before {
            animation: gotoBefore50 0.5s linear forwards;
          }
        }
        .initial100 {
          animation: gotoLeft100 1s ease-out forwards;
          &:before {
            animation: gotoBefore100 1s ease-out forwards;
          }
        }
        @keyframes gotoLeft50 {
          0% {
            left: 104px;
          }
          100% {
            left: 167px;
          }
        }
        @keyframes gotoBefore50 {
          0% {
            left: -104px;
            width: 112px;
          }
          100% {
            width: 174px;
            left: -167px;
          }
        }
        @keyframes gotoLeft100 {
          0% {
            left: 167px;
          }
          100% {
            left: 524px;
          }
        }
        @keyframes gotoBefore100 {
          0% {
            left: -167px;
            width: 174px;
          }
          100% {
            width: 532px;
            left: -524px;
          }
        }
      }
      .stepBottom {
        margin-top: 84px;
        > div {
          float: left;
          width: 50%;
          text-align: center;
        }
        .stepBottomLeft,.stepBottomRight {
          position: relative;
          &:after {
            position: absolute;
            content: '';
            width: 1px;
            height: 214px;
            background-color: #e8e8e8;
            right: 0;
            top: 44px;
          }
          .bindInfo {
            font-size: 16px;
            text-indent: 30px;
            position: relative;
            display: inline-block;
            margin-bottom: 20px;
            &:before {
              content: '';
              width: 22px;
              height: 22px;
              position: absolute;
              top: 2px;
              left: 0;
            }
          }
          .bindYes {
            font-weight: bold;
            color: #277bcf;
            &:before {
              background: url("../assets/img/pushSteps/choose_icon.png");
            }
          }
          .bindNo {
            color: #909090;
            &:before {
              background: url("../assets/img/pushSteps/no_choose_icon.png");
            }
          }
          .wechatBox {
            width: 140px;
            height: 140px;
            border: solid 1px #e9e9e9;
            margin: auto;
            img {
              width: 124px;
              height: 124px;
              margin-top: 8px;
            }
          }
          .headPortrait {
            width: 147px;
            height: 147px;
            border-radius: 50%;
            display: block;
            margin: auto;
            border: solid 1px #e4e4e4;
          }
          .prompt {
            font-size: 12px;
            color: #969696;
            margin: 6px 0 16px;
          }
          .teacherName {
            font-size: 16px;
            color: #333333;
            margin-top: 26px;
          }
          button {
            width: 165px;
            height: 35px;
            background-color: #2e84da;
            border-radius: 3px;
            font-size: 14px;
            color: #ffffff;
            transition: all .2s linear;
            &:hover {
              background-color: #1f80cb;
            }
          }
          .VIPimg {
            display: block;
            margin: auto;
          }
          .VIPuser {
            font-size: 16px;
            color: #277bcf;
            margin-top: 27px;
          }
          .RightBtn {
            width: 145px;
            margin-top: 37px;
          }
        }
      }
      .stepTwo {
        text-align: center;
        padding: 0 20px;
        .teacherTitle {
          font-size: 14px;
          display: inline-block;
          margin-top: 73px;
          color: #525252;
          padding: 0 30px;
          position: relative;
          margin-bottom: 32px;
          &:before,&:after {
            content: '';
            width: 20px;
            height: 2px;
            background-color: #525252;
            position: absolute;
            top: 11px;
          }
          &:before {
            left: 0;
          }
          &:after {
            right: 0;
          }
        }
        #dataBar {
          overflow: hidden;
          max-height: 252px;
        }
        .pushHeader {
          width: 55px;
          height: 55px;
          border: solid 1px #d7d7d7;
          border-radius: 50%;
          margin-bottom: 6px;
        }
        .el-checkbox {
          position: relative;
          margin-bottom: 30px;
          margin-right: 30px;
          width: 96px;
          &:nth-of-type(5n) {
            margin-right: 0;
          }
        }
        .el-checkbox__input {
          white-space: nowrap;
          outline: 0;
          line-height: 1;
          vertical-align: middle;
          position: absolute;
          top: 64px;
          left: 16px;
        }
        .el-checkbox+.el-checkbox {
          margin-left: 0;
        }
        .pushName {
          font-size: 14px;
          color: #333333;
          width: 42px;
          margin-left: 42px;
          height: 10px;
        }
        .introduce {
          font-size: 12px;
          color: #989898;
          width: 96px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          position: absolute;
          bottom: -12px;
        }
        .is-checked+.el-checkbox__label .pushHeader {
          border: solid 1px #2e84da;
        }
        .is-checked+.el-checkbox__label .pushName {
          color: #277bcf;
        }
        .el-checkbox__inner:hover {
          color: #2e84da;
        }
        .el-checkbox__input.is-checked .el-checkbox__inner {
          background-color: #2e84da;
          border-color: #2e84da;
        }
        .pushBtn {
          width: 135px;
          height: 35px;
          background-color: #2e84da;
          border-radius: 3px;
          font-size: 14px;
          color: #ffffff;
          margin-top: 10px;
          transition: all .2s linear;
          &:hover {
            background-color: #1f80cb;
          }
        }
        .annotation {
          width: 506px;
          margin: auto;
          color: #929292;
          font-size: 12px;
          text-align: left;
          margin-top: 22px;
          span {
            color: #1968b1;
          }
          a {
            color: #277bcf;
            text-decoration-line: underline;
          }
          i {
            color: #277bcf;
            cursor: default;
            &:hover +.publicImg {
              opacity: 1;
            }
          }
          .publicImg {
            position: absolute;
            width: 115px;
            height: 115px;
            bottom: -26px;
            right: 94px;
            transition: all .2s linear;
            opacity: 0;
          }
        }
      }
    }
  }
</style>
